// pages/main-music/mian-music.js
import {
  getMusicBanner,
  getSongMenuList
} from "../../services/music"
import recommendStore from '../../store/recommendStore'
import rankingStore from '../../store/rankingStore'
import playerStore from '../../store/playerStore'
import querySelect from '../../utils/query-select'
import throttle from '../../utils/throttle'
// import {
//   throttle
// } from 'underscore'

const querySelectThrottle = throttle(querySelect, 100)
const app = getApp()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    searchValue: '',
    banners: [],
    bannerHeight: 0,
    screenWidth: 375,

    recommendSongs: [],
    // 歌单数据
    hotMenuList: [],
    recMenuList: [],
    // 巅峰榜数据
    isRankingData: false,
    rankingInfos: {},

    // 当前正在播放的歌曲信息
    currentSong: {},
    isPlaying: false,
  },
  onLoad() {
    this.fetchMusicBanner()
    this.fetchSongMenuList()

    recommendStore.onState("recommendSongInfo", this.handleRecommendSongs)
    recommendStore.dispatch("fetchRecommendSongsAction")
    rankingStore.onState("newRanking", this.handleNewRanking)
    rankingStore.onState("originRanking", this.handleOriginRanking)
    rankingStore.onState("upRanking", this.handleUpRanking)

    playerStore.onStates(["currentSong", "isPlaying"], this.handlePlayInfos)

    rankingStore.dispatch("fetchRankingDataAction")

    // 获取屏幕的尺寸
    this.setData({
      screenWidth: app.globalData.screenWidth
    })
  },
  // 网络请求的方法封装
  async fetchMusicBanner() {
    const res = await getMusicBanner()
    this.setData({
      banners: res.banners
    })
  },

  async fetchSongMenuList() {
    getSongMenuList().then(res => {
      this.setData({
        hotMenuList: res.playlists
      })
    })

    getSongMenuList("华语").then(res => {
      this.setData({
        recMenuList: res.playlists
      })
    })
  },
  // 界面的事件监听方法
  onSearchClick() {
    wx.navigateTo({
      url: '/pages/detail-serch/detail-search',
    })
  },
  onBannerImageLoad(event) {
    // 后去Image组件的高度
    // const query = wx.createSelectorQuery()
    // query.select(".banner-image").boundingClientRect()
    // query.exec((res) => {
    //   this.setData({
    //     bannerHeight: res[0].height
    //   })
    // })
    querySelectThrottle(".banner-image").then(res => {
      this.setData({
        bannerHeight: res[0].height
      })
    })
  },
  onRecommendMoreClick() {
    wx.navigateTo({
      url: '/pages/detail-song/detail-song?type=recommend',
    })
  },
  onSongItemTap(event) {
    const index = event.currentTarget.dataset.index
    playerStore.setState("playSongList", this.data.recommendSongs)
    playerStore.setState("playSongIndex", index)
  },
  onPlayOrPauseBtnTap() {
    playerStore.dispatch("changeMusicStatusAction")
  },
  onPlayBarAlbumTap() {
    wx.navigateTo({
      url: '/packagePlayer/pages/music-player/music-player',
    })
  },
  // 从store中获取数据
  handleRecommendSongs(value) {
    if (!value.tracks) return
    this.setData({
      recommendSongs: value.tracks.slice(0, 6)
    })
  },
  handleNewRanking(value) {
    // 新歌榜
    if (!value.name) return
    this.setData({
      isRankingData: true
    })
    const newRankingInfos = {
      ...this.data.rankingInfos,
      newRanking: value
    }
    this.setData({
      rankingInfos: newRankingInfos
    })
  },
  handleOriginRanking(value) {
    // 原创榜
    if (!value.name) return
    this.setData({
      isRankingData: true
    })
    const newRankingInfos = {
      ...this.data.rankingInfos,
      originRanking: value
    }
    this.setData({
      rankingInfos: newRankingInfos
    })
  },
  handleUpRanking(value) {
    // 飙升榜
    if (!value.name) return
    this.setData({
      isRankingData: true
    })
    const newRankingInfos = {
      ...this.data.rankingInfos,
      upRanking: value
    }
    this.setData({
      rankingInfos: newRankingInfos
    })
  },
  handlePlayInfos({
    currentSong,
    isPlaying
  }) {
    if (currentSong) {
      this.setData({
        currentSong
      })
    }
    if (isPlaying !== undefined) {
      this.setData({
        isPlaying
      })
    }
  },
  onUnload() {
    recommendStore.offState("recommendSongInfo", this.handleRecommendSongs)
    rankingStore.offState("newRanking", this.handleNewRanking)
    rankingStore.offState("originRanking", this.handleOriginRanking)
    rankingStore.offState("upRanking", this.handleUpRanking)
    playerStore.onStates(["currentSong", "isPlaying"], this.handlePlayInfos)

  }
})